<template>
	<div id="orderDetails">
		<van-nav-bar title="发票信息" left-text="返回" left-arrow @click-left="onClickLeft" />

		<van-collapse v-model="activeNames" :accordion="true">
			<van-collapse-item name="1">
				<template slot="title">
					发票详情
				</template>
				<template slot="value">
					查看详情
				</template>
				<template slot="default">
					<viewOrderTemplate :dataResouce="dataResouce" :pageDataList="defaultLabelList"></viewOrderTemplate>
				</template>
				<template slot="icon"></template>
			</van-collapse-item>
		</van-collapse>
	</div>
</template>

<script>
	import viewOrderTemplate from '~/components/_viewOrder'
	export default {
		transition:'need',
		data() {
			return {
				details: {},
				dataResouce: [],
				activeNames: '1',
				baseUrls: global.baseurl,
				defaultLabelList: ['订单编号', '抬头', '税号', '发票状态', '发票号码', '发票张数', '发票金额', '开票时间', '退款时间', '发票下载']
			}
		},
		created() {
			this.getCurrentOrderList()
		},
		methods: {
			getCurrentOrderList() {
				let id = this.$route.params.id
				this.$axios.get(`/api/invoice/${id}/show`).then(res => {
					if(res.data.code == 200){
						this.details = res.data.data

						this.dataResouce = [
							{ label: '订单编号', value: this.details.order_number },
							{ label: '抬头', value: this.details.invoice ? this.details.invoice.taitou : '' },
							{ label: '税号', value:  this.details.invoice ? this.details.invoice.tariff_number : '' },
							{ label: '发票号码', value: this.details.invoice ? this.details.invoice_number : '' },
							{ label: '发票张数', value: this.details.number },
							{ label: '发票金额', value: this.details.money },
							{ label: '开票时间', value: this.details.ticket_at },
							{ label: '退款时间', value: this.details.refund_at },
							{ label: '发票下载', value: this.details.path },

						]
					}else{
						this.$toast('请求错误');
					}
				})
			},
			onClickLeft() {
				this.$router.go(-1);
			}
		},
		//缓存也会走的钩子
		activated() {
			this.getCurrentOrderList()
		},
		components: {
			viewOrderTemplate
		}
	}
</script>

<style lang="less">
	#orderDetails {
		height: 100%;
		background: white;

		/deep/ .van-collapse-item__content{
			padding: 0;
		}

		/deep/ .van-cell__right-icon{
			display: none;
		}

		.line-container {
			margin-left: -50px;
			margin-right: 80px;
			box-sizing: border-box;
			.gray-item-circle{
				border: 2px solid gray;
			}
			.item-tag {
				top: -35px;
				width: 200px;//auto;
				left: -320px;
				font-size: auto;
			}

			.line-item {
				padding: 0;
			}

			&::after {
				height: calc(100%);
			}
		}
	}
</style>
